<template>
  <div class="login">
    <main>
      <div class="title">IDS<br />智能决策系统</div>
      <a-form
        :model="formState"
        name="basic"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="" name="username" :rules="[{ required: true, message: '请输入账号!' }]">
          <a-input v-model:value="formState.username" prefix="账号" />
        </a-form-item>
        <a-form-item label="" name="password" :rules="[{ required: true, message: '请输入密码!' }]">
          <a-input-password v-model:value="formState.password" prefix="密码" />
        </a-form-item>
        <div v-if="loginerror" :style="{ color: 'red' }">登录失败</div>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form>
    </main>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router'
import useFilterStore from '@/stores/filter'
import useUserStore from '@/stores/user'
import { client } from '@/utils/http'
import { useQuery } from '@tanstack/vue-query'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'
// import { fullScreen } from '@/utils/fullScreen'

interface FormState {
  username: string
  password: string
  remember: boolean
}

const userStore = useUserStore()

const filterStore = useFilterStore()

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true
})

const { userUpdate } = storeToRefs(userStore)

userUpdate.value = 0

const loginerror = ref(false)

useQuery({
  queryKey: ['/logout.do'],
  queryFn: () => client('/logout.do'),
  enabled: true
})

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo)
}

const onFinish = async (values: { username: string; password: string }) => {
  console.log('Success:', values)
  const { username: userId, password } = values
  // loginisDlrBoard login
  try {
    loginerror.value = false
    const res = await client<{ token: string }[]>(
      '/appDevLogin.do',
      { userId, password },
      { method: 'GET' }
    )

    if (res[0] && res[0].token) {
      userStore.userUpdate += 1
      router.replace('/')
      filterStore.checkDataUpdateNum += 1

      // fullScreen()
    } else {
      loginerror.value = true
    }
  } catch (error) {
    //
  }
}
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  text-align: center;
  margin: auto;
  // width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('@/assets/images/login-bg.png') no-repeat top center;
  background-color: #0b2b44;
  background-size: contain;
  .title {
    white-space: nowrap;
    font-size: 34px;
    line-height: 50px;
    padding-top: 10%;
    padding-bottom: 50px;
    text-align: center;
    color: #fff;
  }
  :deep(form) {
    .ant-input-affix-wrapper,
    .ant-input,
    .ant-input-password {
      border: none;
      background-color: #fff;
      color: #000;
    }
    button {
      background: #244358;
      color: #fff;
      border: 0;
      outline: none;
      padding: 5px 10px;
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
</style>
